<template>
  <el-dialog
    title="输入内容"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :modal="false"
  >
    <editor
      v-if="dialogVisible"
      id="tinymce"
      v-model="myValue"
      :init="init"
    ></editor>
  </el-dialog>
</template>

<script>
import tinymce from "tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";

import "tinymce/plugins/image";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/link";
import "tinymce/plugins/charmap";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/hr";
import "../../public/js/plugins/kityformula-editor";
import "../../public/js/plugins/indent2em";

export default {
  name: "RichEditor",
  props: ["isEdit", "changeIsEdit", "content", "setContent"],
  components: {
    Editor,
  },
  data() {
    return {
      myValue: "",
      init: {
        language_url: "/tinymce/zh_CN.js", // 语言包位置，因为放在public下所以可以省略public
        selector: "#tinymce", //tinymce的id
        language: "zh_CN", //语言类型
        skin_url: "/js/skins/ui/oxide",
        height: 450, //编辑器高度
        branding: false, //是否禁用“Powered by TinyMCE”
        plugins:
          "preview image code lists wordcount link charmap hr kityformula-editor indent2em",
        toolbar:
          `preview  undo redo formatpainter removeformat| 
          formatselect  fontsizeselect bold italic underline strikethrough | 
          forecolor backcolor | 
          indent2em alignleft aligncenter alignright alignjustify | 
          numlist bullist | 
          charmap hr image kityformula-editor | `,
      },
    };
  },
  mounted() {
    tinymce.init({});
    this.myValue = this.content;
  },
  computed: {
    dialogVisible: {
      get() {
        return this.isEdit;
      },
      set() {
        this.changeIsEdit();
      },
    },
  },
  methods: {
    handleClose(done) {
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     this.setContent(this.myValue);
      //     done();
      //   })
      //   .catch((_) => {});
      this.setContent(this.myValue);
      done();
    },
  },
};
</script>

<style lang='less' scoped>
.el-dialog {
  :deep(.el-dialog__wrapper) {
    z-index: 99;
  }
}
</style>

